<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<style type="text/css">
	.mapContainer{
		height: 550px;width:100%;
	}
	.dashboard-menu{
		border-top:1px solid #ecf0f5;
	}
	.app-container{
		background:  #f2f2f2;width: 100%;border-top:1px solid #ecf0f5;
	}
	
	.box-white {
	    width: 97%;
	    min-width: 897px;
	    padding-bottom: 0;
	    margin: 0 auto;
	}
	.box {
	    padding: 10px;
	    padding-top:1px;
	    border-left: 1px solid #d2d6de;
	    border-right: 1px solid #d2d6de;
	    border-bottom: 1px solid #d2d6de;
	}
	.box {
	    border: 0!important;
	    box-shadow: 0 0 2px 1px rgba(13,5,9,.08)!important;
	}
	.box {
	    position: relative;
	    border-radius: 3px;
	    background: #fff;
	    border-top: 3px solid #d2d6de;
	    margin-bottom: 20px;
	    width: 100%;
	    box-shadow: 0 1px 1px rgba(0,0,0,.1);
	}
	.sceneList-info{
		padding-top: 10px;
		padding-left: 10px;
	}
	
</style>
</head>
<body>
	<div>
		<!--  下方部位  -->
		<div style="background: #ecf0f5;">
			<div class="mapContainer" >
				<div class="app-container">
					<div class="container-layout sceneList-info">
						<div class="box join-device-box">
						
							<div>
								<div class="search-container jui-search_table" data-options=" submit:'#searchbtns',
																					 table:'#init-table' ">
										<span class="titleName">Project management</span>
										<span>Project Name:</span> 
										<input style="width: 240px;" type-name="name" placeholder="Project name fuzzy query"  class="input input-self" />
										<button onclick="addScene();" class="button ml-20 bg-iot float-right"><span class="icon-plus"></span> New item</button>
										<button id="searchbtns" class="button ml-20 bg-iot float-right"><span class="icon-search"></span> inquire</button>
								</div>
								
								 <div>
									<div id="init-table" type-option="table" config-option=" url:'/page/scene',
												 param:{},
												 columns:[
													{'name':'Serial number','type':'seq','value':'seq','width':'8%'}, 
													{'name':'Project name','value':'name','width':'10%'}, 
													{'name':'Project description','value':'description','width':'15%' , limit:15}, 
													{'name':'remark','value':'remark','width':'10%', limit:15},
													{ name:'Controls', type:'self', value_callback :'value_function','width':'5%'}]" > 
									</div>
								</div> 
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="grant_auth hide">
			<div style="padding: 30px;">
				<div class="form-line" >
					<span class="red">*</span>&nbsp;<span>User API-KEY：</span>
					<div class="pb-10 pt-10">
						<input placeholder="USER-KEY，Click profile Picture/Personal Details/View"  class="input input-big user-key-id" >
					</div>
				</div>
				
				<div class="mt-20 clearfix">
					<button onclick="closeAll();" style="background: #aaa;" class="layui-btn  border-gray ml-10 float-right">Cancel</button>
					<button onclick="saveSceneInfo();" class="saveScene ml-20 float-right layui-btn layui-btn-normal ">Save</button>
				</div>
			</div>
		</div>
		
	</div>
</body>
<script type="text/javascript">

var tmp_node_id = -1 ;
function t_generateScene(obj,id){
	tmp_node_id = id ;
	$(".user-key-id").val('');
	openWindow("Project ownership migration",".grant_auth","500px"); 
}

function reflesh(){
	$("#init-table").tableAdaptor();
}

function saveSceneInfo(){
	if($(".user-key-id").val() != null && $(".user-key-id").val() != "" ){
		commonAjax('PUT',localUrl+'/relation/scene/user/change.json', {userKey:$(".user-key-id").val()  , scene_id:tmp_node_id   },function(data){
			if(isOK(data)){
				tip("Successful");
				setTimeout(function(){
					$("#init-table").tableAdaptor();
					closeAll() ;
				}, 500);
			}else{
				tip("Current user does not exist");
			}
		});
	}else{
		tip("Please fill in the user information");
	}
}

function value_function(data,seq){
	return "<span tag='Editor' onclick='t_edit(this,"+data.id+")' class='self-icon icon-edit'></span>"+
	       "<span tag='Delete' onclick='t_delete(this,"+data.id+")' class='self-icon icon-bitbucket'></span>"+
		   "<span tag='Project migration' onclick='t_generateScene(this,"+data.id+")' class='self-icon icon-exchange'></span>";
}
	
function addScene(){
	// forwardUrl("/iot/app_detail");
	layer.open({
	      type: 2,
	      title: 'New item',
	      shadeClose: true,
	      shade: 0.7,
	      maxmin: true, //开启最大化最小化按钮
	      area: ['700px', '490px'],
	      content: "<%=basePath%>/service/iot/app_detail"
	   });
}

function t_edit(obj,id){
// 	forwardUrl("/iot/app_detail?id="+id);
	layer.open({
	      type: 2,
	      title: 'Edit item',
	      shadeClose: true,
	      shade: 0.7,
	      maxmin: true, //开启最大化最小化按钮
	      area: ['700px', '490px'],
	      content: "<%=basePath%>/service/iot/app_detail?id="+id
	   });

}

function t_delete(obj,id){
	lcomfirm('Are you sure to delete the item?',function(){
		commonAjax("DELETE",localUrl+"/scene?id="+id, "",function(){
			tip("Successfully deleted");
			setTimeout(function(){
				closeAll();
				$("#init-table").tableAdaptor();
			},1000)
		});
	})
}
$(function(){
	
	$(document).delegate(".limiter","click",function(){
		layer.tips($(this).attr("tag") , this, {
			tips: [1, '#4682B4']
		});
	})
	
})
</script>
</html>